<template>
  <div class="meg-menu">
    <Tabs>
      <Tab-Pane name="开始">
        <Undo-Group></Undo-Group>
        <Clipboard-Group></Clipboard-Group>
        <Font-Group></Font-Group>
        <Alignment-Group></Alignment-Group>
        <Merge-Group></Merge-Group>
        <!--<Num-Group></Num-Group>-->
      </Tab-Pane>
      <!--<Tab-Pane name="插入">
        <Img-Group></Img-Group>
        <Chart-Group></Chart-Group>
      </Tab-Pane>-->
    </Tabs>
  </div>
</template>

<script>

  import Tabs from './tabs/Tabs.vue'
  import TabPane from './tabs/TabPane.vue'
  import FontGroup from './group/FontGroup.vue'
  import UndoGroup from './group/UndoGroup.vue'
  import ClipboardGroup from './group/ClipboardGroup.vue'
  import AlignmentGroup from './group/AlignmentGroup.vue'
  import MergeGroup from './group/MergeGroup.vue'
  import NumGroup from './group/NumGroup.vue'
  import ImgGroup from './group/ImgGroup.vue'
  import ChartGroup from './group/ChartGroup.vue'

  export default{
    provide(){
      return {
        $menu: this
      }
    },
    components: {
      Tabs,
      TabPane,
      FontGroup,
      UndoGroup,
      ClipboardGroup,
      AlignmentGroup,
      MergeGroup,
      NumGroup,
      ImgGroup,
      ChartGroup
    },
    data(){
      return {
        curCell:null
      }
    },
    computed: {
      $sheet(){
        return this.$parent.getCurSheet();
      },
      start(){
        return this.$sheet.selection.start;
      },
//      $cell(){
//        const cell = this.$sheet.getCurCell();
//        return cell;
//      },
    },
    watch:{
      start(){
        this.curCell = this.$sheet.getCurCell();
      }
    },
    methods: {}
  }
</script>

<style lang="scss">
  .meg-menu {
    height: 124px;
    font-size: 12px;
    color: #666;
    user-select:none;
  }
  .meg-menu *{
    font-size: 12px;
    vertical-align: top;
  }
  .meg-menu-op-color {
    position: relative;
  }

  .meg-menu-op {
    display: inline-block;
    border: none;
    min-width: 16px;
    min-height: 16px;
    text-align: center;
    border: 1px solid transparent;
    font-size: 0px;
    padding: 2px;
    vertical-align: top;
    &:hover {
      border-color: #d3f0e0 !important;
      outline: 2px dashed transparent;
    }
    .meg-menu-pcol {
      display: inline-block;
      height: 4px;
      width: 16px;
      position: absolute;
      bottom: 2px;
      left: 2px;
    }
    &.display{
      opacity: 0.5 !important;
      &:hover{
        background-color:transparent !important;
        border-color: transparent !important;
      }
    }
  }

  .meg-menu-select {
    border: 1px solid #ccc;
    padding: 0px;
    input {
      border: none;
      padding: 2px;
      height: 16px;
      &:focus {
        outline: none;
      }
    }
  }



  .meg-iconimg16{
    display: inline-block;
    width: 16px;
    height: 16px;
  }
  .meg-iconimg32{
    display: inline-block;
    width: 32px;
    height: 32px;
  }

  .meg-iconimg{
    &-paste32{
      background: url();
    }
    &-edit-undo16{
      background: url();
    }
    &-edit-redo16{
      background: url();
    }
    &-cut16{
      background: url();
    }
    &-parse16{
      background: url();
    }
    &-formatpainter16{
      background: url();
    }
    &-bold16{
      background: url();
    }
    &-italic16{
      background: url();
    }
    &-underline16{
      background: url();
    }
    &-strikethrough16{
      background: url();
    }
    &-bottomborder16{
      background: url();
    }
    &-fillcolor16{
      background: url();
    }
    &-fontcolor16{
      background: url();
    }
    &-growfont16{
      background: url();
    }
    &-shrinkfont16{
      background: url();
    }
    &-topalign16{
      background: url();
    }
    &-middlealign16{
      background: url();
    }
    &-bottomalign16{
      background: url();
    }
    &-leftalign16{
      background: url();
    }
    &-centeralign16{
      background: url();
    }
    &-rightalign16{
      background: url();
    }
    &-wraptext16{
      background: url();
    }
    &-centeracross16{
      background: url();
    }
  }

</style>
